<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        .title {
            line-height: 40px;
            height: 40px;
            text-indent: 10px;
        }

        .list li {
            text-indent: 10px;
            line-height: 40px;
            height: 40px;
            border: 1px solid #333;
        }

        .first {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h3 class="title">jquery获取元素</h3>
        <ul class="list">
            <li class="first"><span>01</span></li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
        <input type="text" class="search">
    </div>
</body>
<script>

    // css(cssKey,cssValue) 获取和设置元素的css样式

    // css(cssKey)  对应css属性名取值
    // css(cssKey,cssValue)  对应css属性名赋值

    // console.log($(".first").css("background", "red"));
    // 链式设置css
    // $(".first").css("background", "red").css("width", 200).css("height", 200);

    // css可以接收一个对象 => 设置样式
    // $(".list li").css({
    //     background: "red",
    //     width: 200,
    //     height: 200,
    //     color: "blue",
    //     fontSize: 40,
    //     float: "left",
    // })


    // console.log($(".first").css("backgroundColor"));
    // console.log($(".first").css("width"));  // "200px"
    // console.log($(".first").css("height"));  // "200px"
    // console.log($(".first").css("color"));
    // console.log($(".first").css("fontSize"));
    // console.log($(".first").css("float"));
    // console.log($(".first").css("border-width"));



    // width()   获取和设置元素的宽度(content区域)
    // height()  获取和设置元素的高度(content区域)
    // innerHeight()   获取和设置元素的宽度(content区域 + padding)
    // innerWidth()    获取和设置元素的高度(content区域 + padding)
    // outerHeight()   获取和设置元素的宽度(content区域 + padding + border)
    // outerWidth()    获取和设置元素的高度(content区域 + padding + border)

    console.log($(".first").width());
    console.log($(".first").height());

    console.log($(".first").innerWidth());
    console.log($(".first").innerHeight());

    console.log($(".first").outerWidth());
    console.log($(".first").outerHeight());











</script>

</html>